/**
 * @Author: lusx
 * @Date:   01-12-2018 05:10:26
 * @Project: Govern督办
 * @Last modified by:   lusx
 * @Last modified time: 27-09-2019 03:13:47
 */

import React from "react";
import { observer } from "mobx-react";
import { NavLink } from 'react-router-dom';
import { withRouter } from "react-router-dom";
import { Button, Tools, SwipeAction,List } from "weaver-mobile";
import { ListViewPage } from "weaver-mobile-page";
import ComListItem from "../../governTools/comListItem/comListItem.js";
const getLabel = Tools.getLabel;
@withRouter
@observer
//各长列表组件
export default class MainListPage extends React.Component {
  static defaultProps = {
    prefixCls: "govern-list"
  };
  render() {
    const { listViewStore } = this.props;
    return (
      <div className="g-mainListPage">
        <ListViewPage.Normal
          store={listViewStore}
          getTemplate={this.getTemplate}
          rowKey="randomFieldId"
          // heightSpace={50}
          // getRowProps={this.getRowProps}
          withSwipeAction
        />
      </div>
    );
  }

  getTemplate = template => {
    const { extendBtn = true, hasBtns = true, match: { params: { quicktype = '' } = {} } } = this.props;
    let isshare = '0';
    let renderConponent = () => { };
    const newTemp = {
      ...template,
      default: [
        {
          key: "col_1",
          render: data => {
            // console.log('extendBtn--', extendBtn);
            // if(index< 5){
            if (extendBtn === false) {
              const {
                randomFieldId,
                relatedidspan,
                isdefaultspan,
                opttypespan,
                randomFieldCk,
                // randomFieldId
              } = data;
            //  console.log(data.randomFieldCk,data)
            isshare = '1';
              renderConponent = () => (

                <div key={randomFieldId}>
                  <SwipeAction
                    key={randomFieldId}
                    // style={{ backgroundColor: 'gray' }}
                    autoClose
                    right={[
                      {
                        text: getLabel('91', '删除'),
                        onPress: () => {this.props.deleteshare(randomFieldId) },
                        style: { backgroundColor: '#F4333C', color: 'white' },
                      },
                    ]}
                    disabled={randomFieldCk =="false"}
                  >
                   
                    {/* <List.Item key={randomFieldId}> */}
                      <div className='className=namespan'>权限:{opttypespan}</div>
                      <div style={{color: '#868686',fontSize: '10px'}}>对象:{`${relatedidspan.length > 0 ? relatedidspan : getLabel("140", "未设置")}`}</div>
                      <div style={{color: '#868686',fontSize: '10px'}}>共享类型:{isdefaultspan}</div>
                    {/* </List.Item> */}
                  </SwipeAction>
                </div>

              )
            } else if (this.props.match.url.endsWith('statistics/status') || this.props.match.url.endsWith('status')) {
              const { statusspan, count0span, percentagspan, randomFieldId, status } = data;

              renderConponent = (linkPath) => (
                <NavLink
                  to={{
                    pathname: `/quickbar/statusList/${status}`,
                    // search: `?count_status=${status}`,
                    state: { 'namespan': statusspan }
                  }}
                  exact
                  activeClassName="active"
                  key={randomFieldId}
                >
                  <div className='namespan' style={{ color: '#868686' }}>{statusspan}</div>
                  <div className='responsiblespan'>数量:{count0span}</div>
                  {quicktype === 'view-feedback' && <div className='responsiblespan'>比例: {percentagspan}</div>}
                </NavLink>
              )
            } else {
              const {
                id,
                mobileNamespan,
                mobileResponsiblespan,
                dataidspan,
                mobile_feedcontentspan = '',
                mobile_statusspan,
                mobile_statusColorspan,

              } = data;
              renderConponent = (linkPath) => (
                <NavLink
                  to={{
                    pathname: linkPath,
                    search: `?id=${id}`,
                    state: { 'namespan': mobileNamespan }
                  }}
                  exact
                  activeClassName="active"
                  key={id}
                >
                  <div className='namespan' style={dataidspan === '1' ? { color: '#868686' } : null}>{`${mobileNamespan.length > 0 ? mobileNamespan : getLabel("140", "未设置标题")}`}
                    <span style={{ fontSize: '9px', border: ' 1px solid (mobile_statusColorspan)', backgroundColor: (mobile_statusColorspan), borderRadius: '3px', padding: '0px 2px', color: '#fff', right: '15px', position: 'absolute' }} >{mobile_statusspan}</span>
                  </div>
                  <div className='responsiblespan'>{getLabel("120", "责任人")}:{mobileResponsiblespan}</div>
                  {quicktype === 'view-feedback' && <div className='responsiblespan'>反馈内容: {mobile_feedcontentspan}</div>}
                </NavLink>
              )
            }
            // }
            return (
              <ComListItem data={data} isshare ={isshare} render={(linkPath) => {
                return renderConponent(linkPath)
              }}>
                {
                  (extendBtn && hasBtns) && (
                    <Button
                      onClick={this.showActionSheet.bind(this, data.mobileNamespan, data.id)}
                      style={{ border: 'none' }}
                    >
                      {" "}
                    ...{" "}
                    </Button>
                  )
                }
              </ComListItem>
            );
          }
        }
      ]
    };
    return newTemp;
  };
  showActionSheet(mobileNamespan, id, e) {
    e.preventDefault();
    e.stopPropagation();
    const {
      provider: { getActionBtn },
      history: { push },
      match: { url }

    } = this.props;
    getActionBtn({
      message: mobileNamespan,
      historyPush: push,
      path: url,
      id: id
    });
  }

  
}
